<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中常用的按键别名：
            1.回车 => enter
            2.删除 => delete（捕获“删除”和“退格”键）
            3.退出 => esc
            4.空格 => space
            5.换行 => tab（特殊，必须配合keydown去使用）       keyup按下抬起触发，keydown按下就触发
            6.上 => up
            7.下 => down
            8.左 => left
            9.右 => right 

    -->
    <div id="root">
        <h2>{{name}}学习</h2>
        <input type="text" placeholder="请输入" @keyup.huiche="showInfo">
    </div>

    <script type="text/javascript">
        // 自定义按键别名
        Vue.config.keyCodes.huiche = 13
        new Vue({
            el: '#root',
            data: {
                name: 'lyuetw'
            },
            methods: {
                showInfo(e) {
                    // alert('键盘输入事件')
                    console.log(e.target.value)
                }
            },  
        })

    </script>
</body>

</html>